<script lang="ts" setup>

import type {TopicInfo} from "../../network/types/Topic.ts";
import DateTime from "../common/DateTime.vue";
import UserEntrance from "../entrance/UserEntrance.vue";
import TopicReadRoute from "../routes/TopicReadRoute.vue";
import ColRoute from "../routes/ColRoute.vue";
import ForumRoute from "../routes/ForumRoute.vue";
import {ReplyStatus} from "../../network/types/ReplyStatus.ts";
import {TopicStatus} from "../../network/types/TopicStatus.ts";
import ContentRender from "../content/ContentRender.vue";
import {iconUrl} from "../../utils/Utils.ts";

interface Prop {
  topics: TopicInfo[],
  // 显示所属版面
  showParent?: boolean,
  // 选择模式
  selection?: boolean,
}

const props = defineProps<Prop>()
const emit = defineEmits(['selection-change'])
const dateWidth = "180px"

const rowClassName = (row: { rowIndex: number }): string => `item-bg-color${row.rowIndex % 2}`

const titleColor = (status: TopicStatus[] | undefined) => {
  if (status) {
    if (status.includes(TopicStatus.RED)) {
      return `text-color-red`
    }
    if (status.includes(TopicStatus.ORANGE)) {
      return `text-color-orange`
    }
    if (status.includes(TopicStatus.GREEN)) {
      return `text-color-green`
    }
    if (status.includes(TopicStatus.BLUE)) {
      return `text-color-blue`
    }
    if (status.includes(TopicStatus.SILVER)) {
      return `text-color-silver`
    }
  }

  return 'text-color-normal'
}

const titleStyle = (status: TopicStatus[] | undefined) => {
  const color = titleColor(status)
  const bold = status && status.includes(TopicStatus.BOLD) ? 'bold' : ''
  const italic = status && status.includes(TopicStatus.ITALIC) ? 'italic' : ''
  const lineThrough = status && status.includes(TopicStatus.LINE_THROUGH) ? 'line-through' : ''
  return [color, bold, italic, lineThrough].join(' ')
}

interface Status {
  type: "primary" | "success" | "info" | "warning" | "danger",
  text: string,
}

const topicStatus = (topic: TopicInfo): Status[] => {
  const res: Status[] = [];
  //  单帖
  if (topic.topicStatus?.includes(TopicStatus.REPLY_ONCE)) {
    res.push({
      type: "primary",
      text: "单帖",
    })
  }
  if (topic.topicStatus?.includes(TopicStatus.ALL_HIDDEN)) {
    res.push({
      type: "danger",
      text: "全隐",
    })
  }
  if (topic.topicStatus?.includes(TopicStatus.ALL_ANONYMOUS)) {
    res.push({
      type: "danger",
      text: "全匿",
    })
  }
  //  新回复在前
  if (topic.reversed) {
    res.push({
      type: "primary",
      text: "新回复在前",
    })
  }
  if (topic.scoreTopic) {
    res.push({
      type: "primary",
      text: "评分",
    })
  }
  //  下沉
  if (topic.down) {
    res.push({
      type: "warning",
      text: "下沉",
    })
  }
  //  锁定
  if (topic.status?.includes(ReplyStatus.LOCKED)) {
    res.push({
      type: "danger",
      text: "锁定",
    })
  }
  //  隐藏
  if (topic.status?.includes(ReplyStatus.HIDDEN)) {
    res.push({
      type: "danger",
      text: "隐藏",
    })
  }
  //  不再提示
  if (topic.status?.includes(ReplyStatus.NO_HINT)) {
    res.push({
      type: "primary",
      text: "不再提示",
    })
  }
  //  编辑
  if (topic.status?.includes(ReplyStatus.FREE_EDIT)) {
    res.push({
      type: "primary",
      text: "编辑",
    })
  }
  //  自回
  if (topic.status?.includes(ReplyStatus.SELF_REPLY)) {
    res.push({
      type: "primary",
      text: "自回",
    })
  }
  //  审核中
  if (topic.status?.includes(ReplyStatus.VERIFYING)) {
    res.push({
      type: "warning",
      text: "审核中1",
    })
  }
  if (topic.status?.includes(ReplyStatus.VERIFYING_2)) {
    res.push({
      type: "warning",
      text: "审核中2",
    })
  }
  //  审核不通过
  if (topic.status?.includes(ReplyStatus.NOT_VERIFIED)) {
    res.push({
      type: "danger",
      text: "审核不通过",
    })
  }
  //  处罚
  if (topic.status?.includes(ReplyStatus.PUNISHED)) {
    res.push({
      type: "danger",
      text: "处罚",
    })
  }
  // 举报
  if (topic.status?.includes(ReplyStatus.REPORTED)) {
    res.push({
      type: "warning",
      text: "举报",
    })
  }
  //  是合集
  if (topic.status?.includes(ReplyStatus.IS_SET)) {
    res.push({
      type: "primary",
      text: "合集",
    })
  }
  //  是版面
  if (topic.status?.includes(ReplyStatus.IS_FORUM)) {
    res.push({
      type: "primary",
      text: "版面",
    })
  }

  return res
}

</script>

<template>

  <el-table :cell-class-name="rowClassName" :data="props.topics"
            header-cell-class-name="item-bg-color1"
            stripe
            @selection-change="emit('selection-change',$event)"
  >
    <el-table-column v-if="selection" type="selection"/>
    <el-table-column v-else label="#" width="50px">
      <template #default="scope">
        {{ scope.$index }}
      </template>
    </el-table-column>
    <el-table-column label="回复" width="75px">
      <template #default="{row}">
        <div v-if="row.entranceType === 'topic'">
          <!--          打开最新页-->
          <topic-read-route v-if="row.entranceType === 'topic'" :tid="row.topicId" page="e">
            {{ row.replies }}
          </topic-read-route>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="主题">
      <template #default="{row}">
        <div class="topic-cell">
          <span>
            <!--            入口为主题-->
            <topic-read-route v-if="row.entranceType === 'topic'" :tid="row.quoteFrom || row.topicId">
              <span :class="titleStyle(row.topicStatus)">{{ row.title }}</span>
            </topic-read-route>
            <!--            入口为合集-->
            <col-route v-else-if="row.entranceType==='col'" :stid="row.topicId" class="flex-center">
              <el-image :src="iconUrl(row.topicId )" style="width: 60px;height: 60px"/>
              <span :class="titleStyle(row.topicStatus)">{{ row.title }}</span>
              <el-tag v-for="it in topicStatus(row)" :type="it.type">{{ it.text }}</el-tag>
            </col-route>
            <!--            入口为版面-->
            <forum-route v-else :fid="row.entranceId" class="flex-center">
              <el-image :src="iconUrl(row.entranceId )" style="width: 60px;height: 60px"/>
              <span :class="titleStyle(row.topicStatus)">{{ row.title }}</span>
              <el-tag v-for="it in topicStatus(row)" :type="it.type">{{ it.text }}</el-tag>
            </forum-route>
            <!--         主题状态-->
            <el-tag v-for="it in topicStatus(row)" v-if="row.entranceType==='topic'" :type="it.type">{{ it.text }}</el-tag>

          </span>

          <span v-if="row.topicParent && showParent" style="text-align: end">
            <col-route v-if="row.topicParent.colTid" :stid="row.topicParent.colTid">
              [{{ row.topicParent.name }}]
            </col-route>
            <forum-route v-else :fid="row.topicParent.forumId">
              [{{ row.topicParent.name }}]
            </forum-route>
          </span>
        </div>
        <div v-if="row.reply" class="user-replies-div">
          <topic-read-route :pid="row.reply.replyId" :to="1" style="margin-right:10px">[主题中的回复]</topic-read-route>
          <date-time :time="row.reply.postDatetime"/>
          <br>
          <content-render :data="row.reply.nodes || []"/>
        </div>
      </template>
    </el-table-column>

    <el-table-column :width="dateWidth" label="发布">
      <template #default="{row}">
        <div>
          <user-entrance :user-id="row.authorUid" :username="row.authorName"/>
        </div>
        <div>
          <date-time :time="row.postDatetime"/>
        </div>
      </template>
    </el-table-column>
    <el-table-column :width="dateWidth" label="最后回复">
      <template #default="{row}">
        <div v-if="row.entranceType === 'topic'">
          <!--          打开最新页-->
          <topic-read-route v-if="row.entranceType === 'topic'" :tid="row.topicId" page="e">
            <date-time :time="row.lastPost"/>
          </topic-read-route>
        </div>
        <div v-if="row.entranceType === 'topic'">
          <user-entrance :username="row.lastPosterName"/>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
.user-replies-div {
  margin: 0 30px;
}
</style>